<template>
  <div>

    <div class="weui-header"> 
	    <div class="weui-header-left">
	      <a href="javascript:void(0)" @click="goBack()"><i class="icon-x icon-x10"></i></a>
	    </div>
	    <h1 class="weui-header-title">订单详情</h1>
	</div>

  <div class="order-detail">
	<div class="order-status">
		<div class="status-ban">
			 <img src="../images/order.png" class="order">
			 <img src="../images/pay_finish.png" class="pay-finish">
			 <span style="vertical-align: middle; margin-left: 10px;" v-if="payStatus==3">订单待支付</span>
			 <span style="vertical-align: middle; margin-left: 10px;" v-if="payStatus==4">订单已支付</span>
			 <span style="vertical-align: middle; margin-left: 10px;" v-if="payStatus==5 || payStatus==6">订单已取消</span>
		</div>
	</div>

	<!-- 订单详细 -->
	<div class="order-bill">
		<div class="bill-pin"></div>
		<div class="bill-detail">
			<div class="bill-content">
				<div class="row">
					<div style="width:50%;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
						<img src="../images/default_head.png" class="head" v-if="!header"> <img :src="header" class="head" v-if="header"> &nbsp;<span style="vertical-align: middle;">{{username}}</span>
					</div>
					<p style="width:50%;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{tableName}}</p>
				</div>

				<!-- 就餐号 -->
				<!-- 存在样式问题 -->
				<div class="dealcode-theme">
					<div>
						<i class="line-left"></i>
						<p class="dealcode-title">就餐号</p>
						<i class="line-right"></i>
					</div>
					<p class="dealcode">{{queueCode}}</p>
					<p class="deal-tip">请记住就餐号,请凭就餐号取餐</p>
				</div>

			</div>

			<!-- 分割线 -->
			<div class="split-paper">
				 <img src="../images/split_circle.png" class="split-circle-img">
			</div>

			<div class="dish-title"><strong>订单菜品</strong></div>

			<!-- 菜品列表 -->
			<!-- 样式问题 7.10样式修改-->

			<ul class="dish-item" v-for="food in dishList">
				<li class="text-overflow" style="width:50%" v-if="!food.propertyName">{{food.itemName}}</li>
				<li class="text-overflow" style="width:50%" v-if="food.propertyName">{{food.itemName}}({{food.propertyName}})</li>
				<li class="text-center" style="width:20%">x{{food.number}}</li>
				<li class="text-right" style="width:30%">¥{{food.number * food.money}}</li>
			</ul>

			<ul class="dish-item" v-for="service in serviceCharges" v-if="serviceCharges.length >0">
				<li class="text-overflow" style="width:50%">{{service.chargeName}}</li>
				<li class="text-center" style="width:20%">x{{service.quantity}}</li>
				<li class="text-right" style="width:30%">¥{{service.money}}</li>
			</ul>

			<ul class="dish-item" v-if="discountContent && discountContent != ''">
				<li style="width:70%">
					<img src="../images/discount_icon.png" class="discount-icon">
					&nbsp;<span style="vertical-align: middle;">{{discountContent}}</span>
				</li>
				<li class="text-right" style="width:30%">-¥{{discountNum}}</li>
			</ul>

			<!-- <ul class="dish-item">
				<li style="flex: 5">合计 ¥{{totalPrice}} <span class="font13 col999" style="margin-left:5px;">优惠 ¥{{discountNum}}</span></li>
				<li class="text-right" style="flex: 5">实付 <span style="font-size: 22px;color:#f97432">¥{{paidMoney}}</span></li>
			</ul> -->

			<div style="padding:0 10px;">
				<div class="info-row" style="border-style:dashed;">
					<p class="float-left">合计 ¥{{totalPrice}} <span class="font13 col999" style="margin-left:5px;" v-if="discountContent && discountContent != ''">优惠 ¥{{discountNum}}</span></p>
					<p class="float-right">实付 <span style="font-size: 22px;color:#f97432">¥{{paidMoney}}</span></p>
				</div>
			</div>

			<div style="padding:0 10px;" v-if="remark != ''">
				<div class="info-row" style="border-style:dashed;">
					<p class="float-left">备注:</p>
					<p class="float-right" style="width:85%;word-break:break-word;">{{remark}}</p>
				</div>
			</div>

		</div>
	</div>

	<!-- 订单信息 -->
	<div class="order-info">
		<div class="order-info-title"><strong>订单信息</strong></div>
		<div style="padding:0 10px;">
			<div class="info-row">
				<p class="float-left">订单编号:</p>
				<p class="float-right">{{orderCode}}</p>
			</div>
		</div>

		<div style="padding:0 10px;">
			<div class="info-row">
				<p class="float-left">下单时间:</p>
				<p class="float-right">{{orderTime}}</p>
			</div>
		</div>

		<div style="padding:0 10px;">
			<div class="info-row">
				<p class="float-left">支付方式:</p>
				<p class="float-right" v-if="payType==1">微信支付</p>
				<p class="float-right" v-if="payType==2">线下支付</p>
				<p class="float-right" v-if="payType==3">支付宝支付</p>
			</div>
		</div>

		<div style="padding:0 10px;" v-if="invoiceType!=0">
			<div class="info-row">
				<p class="float-left">发票类型:</p>
				<p class="float-right" v-if="invoiceType==1">个人纸质</p>
				<p class="float-right" v-if="invoiceType==2">个人电子</p>
				<p class="float-right" v-if="invoiceType==3">公司纸质</p>
				<p class="float-right" v-if="invoiceType==4">公司电子</p>
			</div>
		</div>

		<div style="padding:0 10px;" v-if="invoiceHeader !=''">
			<div class="info-row">
				<p class="float-left">发票抬头:</p>
				<p class="float-right text-right" style="width:75%;word-break:break-word;">{{invoiceHeader}}</p>
			</div>
		</div>

		<div style="padding:0 10px;" v-if="email !=''">
			<div class="info-row">
				<p class="float-left">发票邮箱:</p>
				<p class="float-right text-right" style="width:75%;word-break:break-word;">{{email}}</p>
			</div>
		</div>

	</div>

    <a :href="ad.adUrl"><img :src="ad.imageUrl" class="ad"/></a>

	<img src="../images/wx.jpg" class="weixin-img"/>

	<!-- 评价订单按钮 -->
	<div class="opt">
		<button type="button" v-if="evaluateStatus == 0" @click="gotoEvaluate()">菜品评价</button>
		<button type="button" v-if="evaluateStatus == 1" @click="evaluateResult()">查看评价</button>
	</div>

   </div>
  </div>
</template>

<script type="text/ecmascript-6">

	const SUCCESS = 200;
    export default {
      data() {
	      return {
	      	payStatus:0,
	      	header:null,
	      	username:null,
	      	tableName:null,
	      	queueCode:null,
	      	dishList:[],
	      	serviceCharges:[],
	      	hasDiscount:false,
	      	discountContent:"",
	      	totalPrice:0,
	      	discountNum:0,
	      	orderCode:null,
	      	orderTime:null,
	      	payType:0,
	      	invoiceType:0,
	      	invoiceHeader:null,
	      	email:null,
	      	evaluateStatus:0,
	      	ad:{},
	      	remark:"",
	      	paidMoney:0,
	      }
        },
        activated() {
          localStorage.removeItem("orderId");
           this._getOrderDetail();
           this._getAd();
        },
        methods:{
        	_getOrderDetail(){
    		  const _this = this;
	          let orderId = this.$route.query.orderId;
	          let token = window.localStorage.getItem('token');
	          this.$http({
	            method:'get',
	            url:'/fastfood/selectOrderDetail?orderId='+orderId,
	            headers: {
	                'Authorization':'Basic '+ token,
	                "content-type" : "application/json"
	            },
	            }).then((response) => {
	                if(response.data.code==SUCCESS){
	                	let model = response.data.model;
	                	_this.payStatus = model.status;
	                	_this.header = model.headUrl;
	                	_this.username = model.username;
	                	_this.tableName = model.tableName;
	                	_this.queueCode = model.eatNumber;
	                	if(_this.queueCode == null || _this.queueCode ==""){
	                		_this.queueCode == "_ _ _";
	                	}
	                	_this.invoiceType = model.invoiceType;
	                	_this.orderCode = model.orderNo;
	                	_this.orderTime = model.addtime;
	                	_this.payType = model.payType;
	                	// _this.evaluateStatus = 1;
	                	_this.evaluateStatus = model.evaluateStatus;
	                	_this.dishList = model.orderItemList;
	                	_this.discountContent = model.activityName;
	                	_this.remark = model.remark;
	                	_this.discountNum = model.paidDiscountMoney;
	                	_this.paidMoney = model.paidMoney;
	                	_this.serviceCharges = model.serviceList;
	                	_this.invoiceHeader = model.invoiceHeader;
	                	_this.email = model.email;

	                	let servicePrice = 0;
	                	if(model.serviceList.length >0){
	                		for(let i =0;i<model.serviceList.length;i++){
	                			servicePrice += model.serviceList[i].money;
	                		}
	                	}
	                	
	                	let totalPrice = Number(model.totelprice) + Number(servicePrice.toFixed(2));
	                	_this.totalPrice = totalPrice;

	                	//存储nickname,headUrl,在菜品评价页面使用
						localStorage.setItem("nickName",model.username);
						localStorage.setItem("headUrl",model.headUrl);
						localStorage.setItem("orderNo",model.orderNo);

	                }
	            });
        	},
        	_getAd(){
        		const _this = this;
        		this.$http({
					method:'get',
					url:'http://portal.51eparty.com/api/ad?type=ORDER_DETAIL'
				}).then((res) => {
					if(res.data.data){
						_this.ad = res.data.data;
					}
				});
        	},
        	gotoEvaluate(){
	    		 let orderId = this.$route.query.orderId;
		         const orderNo = window.localStorage.getItem('orderNo');
        		this.$router.push({ name: 'evaluate', query: { orderId: orderId, orderNo:orderNo}})
        	},
        	evaluateResult(){
        		 let orderId = this.$route.query.orderId;
		         const orderNo = window.localStorage.getItem('orderNo');
        		this.$router.push({ name: 'evaluateResult', query: { orderId: orderId,orderNo:orderNo }})
        	},
        	goBack(){
        		let parentType = localStorage.getItem("parentType");
        		if(parentType =='pay'){
			        let token = window.localStorage.getItem('token');
			        let storeId = window.localStorage.getItem('storeId');
			        let tableId = window.localStorage.getItem('tableId');
			        let tableName = window.localStorage.getItem('tableName');
			        this.$router.push({name:'menu',query:{token:token,storeId:storeId,tableId:tableId,tableName:tableName}});
        		}

        		if(parentType =="hasOrder"){
        			this.$router.push('/hasOrder');
        		}

        		if(parentType =="myhome"){
        			this.$router.push('/myhome');
        		}
        	}
        }
    };

</script>

<style lang="less" scoped>

.weui-header {
		background: #0aa59f;
		color: white;
	}

	.weui-header:before {
		border-bottom: none;
	}

	.icon-x10:before {
		color: white;
	}

.order-detail {
	padding-top: 45px;
	padding-bottom: 60px;

	.order-status {
		padding: 10px;
		background: #0aa59f;
	}

	.status-ban {
		width: 100%;
		height: 60px;
		line-height: 60px;
		background: white;
		padding-left: 15px;
		position: relative;
	}

	.order {
		width: 42px;
		height: 42px;
		vertical-align: middle;
	}

	.pay-finish {
		width: 17px;
		height: 17px;
		position: absolute;
		top: 33px;
		left: 45px;
		z-index: 10;
	}

	.order-bill {
		padding: 20px 5px 10px;
		position: relative;
	}

	.bill-pin {
		width: 100%;
		height: 6px;
		background: #cfcfcf;
		border-radius: 4px;
	}

	/*.bill-detail {
		width: 96%;
		height: auto;
		background: white;
		z-index: 100;
		position: absolute;
		top: 24px;
		left: 0;
		right: 0;
		margin: 0 auto;
	}*/


	.bill-detail {
		margin-top: -3px;
		margin-left: 5px;
		margin-right: 5px;
		background: white;
		z-index: 100;
	}

	.bill-content {
		padding: 13px;
	}

	.head {
		height: 28px;
		width: 28px;
		border-radius: 50%;
		vertical-align: middle;
	}

	.row {
		height: 34px;
		line-height: 34px;
	}

	.line-left {
	  display:inline-block;
	  width:37px;
	  height:3px;
	  vertical-align:middle;
	  background:url("../images/line-left.png") no-repeat;
	  background-size: 100% 100%;
	}

	.line-right {
	  display:inline-block;
	  width:37px;
	  height:3px;
	  vertical-align:middle;
	  background:url("../images/line-right.png") no-repeat;
	  background-size: 100% 100%;
	}

	.dealcode-title {
		display: inline-block;
		margin: 0 10px;
		color: #ffb196;
	}

	.dealcode-theme {
		width: 220px;
		height: 94px;
		margin: 0 auto;
		text-align: center;
		margin-top: 5px;
	}

	.dealcode {
		font-size: 26px;
		color:#ff571d;
		margin-top: 10px;
	}

	.deal-tip{
		color:#999;
		margin-top: 15px;
	}

	.split-paper {
		height: 25px;
		position: relative;
	}

	/*.left-circle {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: #f1f1f1;
		position: absolute;
		top: 0;
		left: -8px;
	}

	.right-circle {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: #f1f1f1;
		position: absolute;
		top: 0;
		right: -8px;
	}

	.circle-container {
		padding:0 20px;
		width: 100%;
		height: 12px;
		position: absolute;
		top: 5px;
		left: 0;
	}

	.split-circle {
		width: 100%;
		height: 100%;
		background:url("/images/circle.png");
		background-size: 12px 12px;
	}*/

	.split-circle-img {
		width: 100%;
		height: 18px;
	}

	.dish-title {
		height: 45px;
		line-height: 45px;
		padding-left: 10px;
		border-bottom: 1px solid #ddd;
	}

	.dish-item {
		display: flex;
		padding: 0 10px;
		height: 50px;
		line-height: 50px;
	}

	.dish-item li {
		border-bottom: 1px dashed #cbcbcb;
	}

	.discount-icon {
		width: 16px;
		height: 14px;
		vertical-align: middle;
	}

	.order-info-title {
		height: 47px;
		line-height: 47px;
		background: white;
		padding-left: 10px;
		border-bottom: 1px solid #ddd;
	}

	.order-info {
		background: white;
	}

	.info-row {
		padding:15px 0;
		background: white;
		font-size: 14px;
		color: #666;
		border-bottom: 1px solid #ddd;
		overflow:hidden;
	}

	.opt {
		height: 50px;
		width: 100%;
		background: white;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 100;
		padding: 5px 10px;
	}

	.opt button {
		height: 100%;
		width: 100%;
		background: #11bbb4;
		font-size: 18px;
		color: white;
		border-radius: 4px;
	}

	.opt:before{
	  content: " ";
	  position: absolute;
	  left: 0;
	  top: 0;
	  width: 100%;
	  border-bottom: 1px solid #BCBAB6;
	  color: #BCBAB6;
	  -webkit-transform-origin:0 100%;
	  transform-origin:0 100%;
	  -webkit-transform: scaleY(0.5);
	  transform: scaleY(0.5);
	}

	.weixin-img {
		display: block;
		margin-top: 10px;
		width: 100%;
	}

	.ad {
		width:100%;
		height:120px;
		display: block;
		margin-top: 10px;
	}

}
	
</style>
